<template>
  <el-card>
    <template #header>
      <el-row>
        <el-col :span="12" align="left">
          <span>USERS</span>
        </el-col>
        <el-col :span="12" align="right">
          <el-button type="primary" @click="showDialog('add', null)">新增用户</el-button>
        </el-col>
      </el-row>
    </template>
    <!--用户列表-->
    <el-row>
      <el-col :span="24">
        <el-form :model="that.q" label-width="80px">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="创建时间">
                <el-date-picker v-model="that.q.createTime" type="date" format="YY-MM-DD" style="width: 100%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用户名">
                <el-input v-model="that.q.userName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="昵称">
                <el-input v-model="that.q.nickName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别">
                <el-select v-model="that.q.gender" style="width: 100%">
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期">
                <el-date-picker v-model="that.q.birthday" type="date" format="YY-MM-DD" style="width: 100%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="省">
                <el-select v-model="that.q.province" style="width: 100%">
                  <template v-for="item in that.provinceList">
                    <el-option :label="item.label" :value="item.label"></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="市">
                <el-select v-model="that.q.city" style="width: 100%">
                  <template v-for="item in that.cityList">
                    <el-option :label="item.label" :value="item.label"></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学校">
                <el-input v-model="that.q.school"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="专业">
                <el-input v-model="that.q.profession"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="resetQ">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-table :data="that.tableData" stripe border height="calc(100vh - 300px)" style="width: 100%">
          <el-table-column type="index" fixed="left" width="50" align="center"></el-table-column>
          <el-table-column label="ID" fixed="left" width="300px">
            <template #default="scope">
              <p>UserId：{{scope.row.id}}</p>
              <p>CreateTime：{{scope.row.createTime}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="用户名"></el-table-column>
          <el-table-column prop="nickName" label="昵称" width="120px"></el-table-column>
          <el-table-column label="头像" width="150px" align="center">
            <template #default="scope">
              <el-link type="primary" :href="viewFile({fileId: scope.row.avatar}) + '?t=' + Date.now()" target="_blank">
                <el-image :src="viewFile({fileId: scope.row.avatar}) + '?t=' + Date.now()" style="width: 100px"></el-image>
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="intro" label="简介" width="300px"></el-table-column>
          <el-table-column prop="gender" label="性别"></el-table-column>
          <el-table-column prop="birthday" label="出生日期" width="200px"></el-table-column>
          <el-table-column label="省/市" width="250px">
            <template #default="scope">
              <p>{{ scope.row.province }}</p>
              <p>{{ scope.row.city }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="school" label="学校" width="160px"></el-table-column>
          <el-table-column prop="profession" label="专业" width="100px"></el-table-column>
          <el-table-column label="操作" fixed="right" width="100px" align="center">
            <template #default="scope">
              <el-button type="text" @click="showDialog('modify', scope.row)">编辑</el-button>
              <el-button type="text" class="color-danger" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="that.q.page"
            :page-sizes="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :page-size="that.q.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="that.q.total">
        </el-pagination>
      </el-col>
    </el-row>
  </el-card>


  <!--新增/编辑用户-->
  <el-dialog :title="dialogTitle" v-model="that.dialogVisible" top="50px" width="400px">
    <el-form :model="that.f" label-width="80px">
      <el-form-item label="ID">
        <el-input v-model="that.f.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="that.f.createTime" type="date" disabled style="width: 100%"></el-date-picker>
      </el-form-item>
      <el-form-item label="用户名" required>
        <el-input v-model="that.f.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="that.f.password"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="that.f.nickName"></el-input>
      </el-form-item>
      <el-form-item label="上传头像">
        <el-upload action="#" :http-request="httpRequest" :show-file-list="false">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="头像">
        <el-input v-model="that.f.avatar" disabled></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="that.f.intro"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="that.f.gender" style="width: 100%">
          <el-option label="请选择" value=""></el-option>
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker v-model="that.f.birthday" type="date" style="width: 100%"></el-date-picker>
      </el-form-item>
      <el-form-item label="省">
        <el-select v-model="that.f.province" style="width: 100%">
          <template v-for="item in that.provinceList">
            <el-option :label="item.label" :value="item.label"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="市">
        <el-select v-model="that.f.city" style="width: 100%">
          <template v-for="item in that.cityList">
            <el-option :label="item.label" :value="item.label"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="学校">
        <el-input v-model="that.f.school"></el-input>
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="that.f.profession"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" v-if="that.f_status === 'add'" @click="add">新增</el-button>
      <el-button type="primary" v-if="that.f_status === 'modify'" @click="modify">修改</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import {reactive, getCurrentInstance, computed} from "vue";
import {upload, userAdd, userDel, userList, preview, userInfo, userModify} from "../../assets/api";
import {JSEncrypt} from 'encryptlong';
const {proxy} = getCurrentInstance();

let that = reactive({
  dialogVisible: false,
  f: {
    id: '',             // ID
    userName: '',       // 用户名
    password: '',       // 密码
    nickName: '',       // 昵称
    avatar: '',         // 头像
    intro: '',          // 简介
    gender: '',          // 性别
    birthday: '',       // 出生日期
    city: '',           // 市
    province: '',       // 省
    school: '',         // 学校
    profession: '',     // 专业
    createTime: ''      // 创建时间
  },
  provinceList: [
    {label: '天津', code: '10000'},
    {label: '北京', code: '20000'},
  ],
  cityList: [
    {label: '天津市', code: '10001'},
    {label: '故宫', code: '20001'},
  ],
  f_status: '', // add新增 modify修改

  tableData: [],
  q: {
    page: 1,
    size: 5,
    total: 0,
    userName: '',       // 用户名
    nickName: '',       // 昵称
    gender: '',          // 性别
    birthday: '',       // 出生日期
    city: '',           // 市
    province: '',       // 省
    school: '',         // 学校
    profession: '',     // 专业
    createTime: ''      // 创建时间
  }
})


/* ================================ 方法 ================================ */
// 重置
const reset = () => {
  that.f = {
    id: '',             // ID
    userName: '',       // 用户名
    password: '',       // 密码
    nickName: '',       // 昵称
    avatar: '',         // 头像
    intro: '',          // 简介
    gender: '',          // 性别
    birthday: '',       // 出生日期
    city: '',           // 市
    province: '',       // 省
    school: '',         // 学校
    profession: '',     // 专业
    createTime: ''      // 创建时间
  }
}
// 新增用户
const add = () => {
  let params = JSON.parse(JSON.stringify(that.f));
  delete params.createTime;

  let encryptor = new JSEncrypt();
  encryptor.setPublicKey(localStorage.getItem('PUBLIC_KEY'));
  let encrypted = encryptor.encryptLong(JSON.stringify(params));

  userAdd({addParams: encrypted}).then(({data}) => {
    that.dialogVisible = false;
    list();
  })
}

// 展示弹出层
const showDialog = (mode, row) => {
  if (mode === 'add') {
    reset()
  }
  if (mode === 'modify') {
    info(row);
  }
  that.f_status = mode;
  that.dialogVisible = true;
}

// 弹出框表头
const dialogTitle = computed(() => {
  switch (that.f_status) {
    case "add":
      return '新增';
    case "modify":
      return '编辑'
  }
})

// 单页数据量
const handleSizeChange = (val) => {
  that.q.page = 1;
  that.q.size = val;
  list();
}

// 第几页
const handleCurrentChange = (val) => {
  that.q.page = val;
  list();
}

// 用户列表
const list = () => {
  userList(that.q).then(({data}) => {
    that.tableData = data.list;
    that.q.page = data.page;
    that.q.size = data.size;
    that.q.total = data.total;
  })
}

// 上传文件
const httpRequest = (params) => {
  let formData = new FormData();
  formData.append('file', params.file);
  if(that.f.avatar){
    formData.append('fileId', that.f.avatar);
  }
  upload(formData).then(({data})=>{
    that.f.avatar = data.fileId;
  })
}

// 预览
const viewFile = (row) => {
  return preview(row);
}

// 用户信息
const info = (row) => {
  userInfo({id: row.id}).then(({data})=>{
    that.f = data;
  })
}


// 删除用户
const del = (row)=>{
  userDel({id: row.id}).then(({data})=>{
    list();
  })
}


// 修改用户
const modify = ()=>{
  userModify(that.f).then(({data})=>{
    that.dialogVisible = false;
    list();
  })
}

// 搜索
const search = ()=>{
  that.q.page =  1;
  that.q.size = 5;
  that.q.total = 0;
  list();
}

// 重置搜索
const resetQ = ()=>{
  that.q = {
    page: 1,
    size: 5,
    total: 0,
    userName: '',       // 用户名
    nickName: '',       // 昵称
    gender: '',          // 性别
    birthday: '',       // 出生日期
    city: '',           // 市
    province: '',       // 省
    school: '',         // 学校
    profession: '',     // 专业
    createTime: ''      // 创建时间
  }
}

/* ================================ 初始化 ================================ */
const init = () => {
  list();
}
init();
</script>

<style scoped>

</style>
